/**
 * Created by RC-Y on 2017/3/25.
 */
/*等待页面加载完成*/
window.onload = function () {
    search();
    banner();
    downTime();
}

/*头部搜索*/
function search() {
    /*根据轮播图高度，在滚动的时候动态调节搜索部分的透明度*/
    /*获取搜索盒子*/
    var searchBox = document.querySelector('.jd_header_box');
    /*获取轮播图盒子*/
    var bannerBox = document.querySelector('.jd_banner');
    /*获取轮播图高度*/
    var height = bannerBox.offsetHeight;
    /*监听滑动事件*/
    window.onscroll =  function () {
        /*监听当前滚动的距离是否超过轮播图*/
        /*获取当前滚动的距离*/
        var top = document.body.scrollTop;

        var opacity = 0;
        /*当滚动距离大于轮播图高度，则不改变透明度*/
        if(top > height){
               opacity = 0.85;
        }
        /* 如果小于轮播图高度，则动态修改透明度 */
        else {
            opacity = 0.85 * (top/height);
        }

        /*设置搜索盒子的透明度*/
        searchBox.style.background = "rgba(201,21,35,"+opacity+")";
    }
}

/*轮播图*/
function banner() {
    /*
     * 1.图片自动轮播
     * 2.下面的点跟着变化
     * 3.图片盒子能滑动
     * 4.当滑动的距离小于某值时，吸附回去
     * 5.当滑动距离大于某值时，图片做向右滚动
     * （某值：1/3的图片宽度）
     * */

    /*一.需要操作的Dom*/
    /*轮播图大盒子*/
    var banner = document.querySelector('.jd_banner');
    /*轮播图大盒子的宽度*/
    var width = banner.offsetWidth;
    /*图片盒子*/
    var imagesBox = banner.querySelector("ul:first-child");
    /*点盒子*/
    var pointBox = banner.querySelector("ul:last-child");
    /*所有的点*/
    var points = pointBox.querySelectorAll('li');
    
    // 公用方法
    // 添加过度
    var addTransition = function () {
        // 让图片动画滚动  translateX  transition 来实现动画
        // 给imageBox加上过度
        imagesBox.style.webkitTransition = "all .2s";/*进行兼容处理*/
        imagesBox.style.transition = "all .2s";
    }
    // 删除过度
    var removeTransition = function () {
        imagesBox.style.webkitTransition = "none";/*进行兼容处理*/
        imagesBox.style.transition = "none";
    }
    // 设置定位
    var setTranslateX = function (x) {
        // 给imageBox设置当前的位置
        imagesBox.style.webkitTransform = "translateX("+x+"px)";
        imagesBox.style.transform = "translateX("+x+"px)";
    }

    // 第二步
    // 1.自动轮播
    var index = 1;//1为当前索引
    // 定时器
    var timer = setInterval(function () {
        index++;
        // 给imageBox加上过渡
        addTransition();
        // 给imageBox设置当前位置
        setTranslateX(-index*width);
    },3000);

    //第三步
    // 无缝滚动和滑动
    // 动画结束或过度结束 判断当前是第几张   transitionEnd 过渡结束后触发 chrome不支持，要加webkit兼容
    // 如果索引是9则需要瞬间定位到第一张
    // 如果索引是0则需要瞬间定位到第八张图片
    //这是一个公用js在common中定义，后面是一个回调函数
    itcast.transitionEnd(imagesBox,function () {
        console.log('封装');
        if(index >= 9){
            index = 1;
            // 改变索引值后需要瞬间定位
            // 先去除过度 再定位
            removeTransition();
            // 做定位
            setTranslateX(-index*width);
        }else if(index <= 0){
            index = 8;
            // 改变索引值后需要瞬间定位
            // 先去除过度 再定位
            removeTransition();
            // 做定位
            setTranslateX(-index*width);
        }
        /*设置当前的点*/
        setPoint(index);
    });

    // 第四步
    // 点随着图片轮播变化
    var setPoint = function (index) {
        /*去除当前样式*/
        for(var i = 0; i < points.length; i++){
            points[i].className = "";
        }
        // 索引值 为0-9
        // 又需要判断index 是0 9的时候设置为对应图片
        // 但是我们设置点是在动画结束后
        // 我们的index已经重置
        // 在调用的地方的index只有0-8
        points[index-1].className = "now";
    }

    // 第五步
    // 图片盒子能滑动
    // 开始的x坐标
    var startX = 0;
    // 移动时候的x坐标
    var moveX = 0;
    // 移动距离
    var distanceX = 0;
    // 判断是否滑动过
    var isMove = false;
    // 绑定事件
    imagesBox.addEventListener('touchstart',function (e) {
        // 清除定时器
        clearInterval(timer);
        startX = e.touches[0].clientX;
    });
    imagesBox.addEventListener('touchmove',function (e) {
        isMove = true;
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        // 在滑动的时候不断给图片盒子做定位，以达到滑动的效果
        // 定位的位置 当前图片的位置 加上 移动的距离
        // 清除过渡
        removeTransition();
        // 设置当前的定位
        setTranslateX(-index*width + distanceX);


    });
    //在chrome模拟器 可能会出现 touchend事件会丢失 所以改为window接收
    window.addEventListener('touchend',function (e) {
        // 第六步
        // 滑动不超过一定长度吸附回去
        // 超过一定长度做相应滚动
        // 一定长度是 1/3的图片长度
        if(Math.abs(distanceX) > (width/3) && isMove){
            // 超过一定长度做相应滚动 开启动画 开始滚
            addTransition();
            // 判断滚动方向
            if(distanceX > 0){
                index--;
                setTranslateX(-index*width);
            }else {
                index++;
                setTranslateX(-index*width);
            }
        }else {
            // 滑动不超过一定长度吸附回去 先开启动画效果 再回到原位
            addTransition();
            setTranslateX(-index*width);
        }

        // 滑动结束后重置参数 防止影响下次操作
        startX = 0;
        moveX = 0;
        distanceX = 0;
        isMove = false;

        //最后加上定时器
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            addTransition();
            setTranslateX(-index*width);
        },3000);
    });
}

// 倒计时
function downTime() {
    // 1.需要的倒计时时间 此处固定给5h
    // 2.每隔一秒计算当前时间
    // 3.渲染到页面

    // 倒计时的时间
    var time = 5 * 60 * 60;

    // 获取dom元素
    var skTime = document.querySelector('.sk_time');
    console.log(skTime);
    // 所有的span
    var spans = skTime.querySelectorAll('span');
    console.log(spans);
    // 定时器
    var timer = setInterval(function () {
        time--;
        if (time<0){
            clearInterval(timer);
            return false;
        }

        // 格式化时间，获得时分秒
        var h = Math.floor(time/3600);
        var m = Math.floor((time%3600)/60);
        var s = time%60;
        // 渲染  Math.floor向下取整
        spans[0].innerHTML = Math.floor(h/10);
        spans[1].innerHTML = h%10;

        spans[3].innerHTML = Math.floor(m/10);
        spans[4].innerHTML = m%10;

        spans[6].innerHTML = Math.floor(s/10);
        spans[7].innerHTML = s%10;

    },1000);
}































